<template>
  <div>
    用户名<input type="text" v-model="username"><hr>
    姓名: <input type="text" v-model="user.name">  年龄: <input type="text" v-model="user.age">
  </div>
</template>

<script>
export default {
  data() {
    return {
     username:'',
     user:{
      name:"",
      age:'',
     }
    };
  },
  watch:{
    //语法:
    //要监听的数据(newVal,oldVal)
       username(newVal,oldVal) {
        //只要发生改变会自动执行
        console.log(newVal,oldVal);
       },
        // 侦听器的完整写法
    // 要监听的数据: {
    //   handler(newVal, oldVal) {},
    //   deep: true // 开启深度侦听
    // }
    // user(newVal) {
    //   // watch 默认情况下不能监听引用数据类型
    //   console.log(newVal)
    // }
       user:{
        deep:true,//深度监听
        handler(newVal,oldVal){
           // handler(newVal, oldVal) {
        // 注意事项: 在 Vue2 中, newVal 和 oldVal 是一样的, 这是一个官方 Bug
        // 为什么不解决? 因为这个 Bug 不影响开发, 我们在写代码的时候, 几乎所有情况下都使用 newVal
          console.log(newVal,oldVal);
        }
       }
  }
  
  
};
</script>

<style>
</style>